<template>
  <div>
    <Header title="地址簿"></Header>
    <van-address-list
        :list="list"
        default-tag-text="默认"
        @add="onAdd"
        @edit="onEdit"
    ></van-address-list>
  </div>
</template>

<script setup>
import Header from '@/components/Header'
import {onMounted, ref} from "vue";
import {useStore} from "vuex";
import router from "@/router";

const list = ref([])
const store = useStore()

const initAddress = () => {
  list.value = store.state.userAddress.map(item => {
    return {
      id: item.id,
      name: item.name,
      tel: item.tel,
      address: `${item.province}${item.city}${item.county}${item.addressDetail}`,
      isDefault: item.isDefault
    }
  })
}

onMounted(() => {
  initAddress()
})
const onAdd = () => {
  router.push({
    path: '/address-edit', query: {
      type: "add"
    }
  })
}

  const onEdit = (item) => {
    router.push({
      path: '/address-edit', query: {
        id: item.id,
        type: "edit"
      }
    })
  }
</script>

<style lang="less" scoped>
/deep/ .van-button--danger {
  background-color: #ffc400;
  border-color: #ffc400;
}

/deep/ .van-switch--on {
  background-color: #ffc400;
}

/deep/ .van-radio__icon {
  display: none;
}
</style>